<script setup>
defineOptions({name: 'Pagination'});
/**
 * emit 事件 @event {Function()} click 点击事件
 * @event changePage{Number page 当前页数} 抛出分页页数
 * @event changeSize{Number current 当前页数, Number size 每页条数} 抛出分页页数以及每页条数
 * @type {EmitFn<(string)[]>}
 */
const emit = defineEmits(["changePage", "changeSize"]);
/**
 * props 参数
 * @property {Number} page 页数
 * @property {Number} pageSize 条数
 * @property {Number} total 总数
 * @type {Prettify<Readonly<ExtractPropTypes<{total: {default: number, type: NumberConstructor}, pageSize: {default: number, type: NumberConstructor}, page: {default: number, type: NumberConstructor}}>>>}
 */
const props = defineProps({
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 100,
  },
});
const pageData = ref({
  pageSizeOptions: ["10", "20", "30", "40", "50", "100", "200"],
});
const method = reactive({
  changePage: (page) => {
    emit("changePage", page);
  },
  changeSize: (current, size) => {
    emit("changeSize", {current, size});
  },
});
</script>

<template>
  <div class="pagination">
    <a-pagination :total="props.total" :page-size-options="pageData.pageSizeOptions"
                  :show-total="total => `共 ${total} 条`"
                  :locale="{items_per_page: '条/页',jump_to: '前往',jump_to_confirm: '确定', page: '页',}"
                  @change="method.changePage" @showSizeChange="method.changeSize"
                  show-size-changer show-quick-jumper>
    </a-pagination>
  </div>
</template>

<style scoped lang="less">
.pagination {
  margin: 20px auto;
  width: 99%;
  height: 35px;
  display: flex;
  justify-content: end;
}
</style>